<template>
	<view class="one-store">
		<view class="search_box">
			<uni-easyinput
				class="search"
				type="text"
				placeholderStyle="font-size:28rpx;"
				@confirm="search"
				:inputBorder="false"
				@clear="clear"
				prefixIcon="search"
				@input="input"
				v-model="selectVo.name"
				placeholder="输入公告标题搜索"
			></uni-easyinput>
			<view class="search_btn" @click="search">搜索</view>
		</view>
		<view class="list_top">
			<view class="filt_date" @click="open()">
				<span style="color: #777777">发布时间：</span>
				{{
					selectVo.dateType == 4
						? selectVo.startTime == selectVo.endTime
							? selectVo.endTime
							: selectVo.startTime + '~' + selectVo.endTime
						: filtList[selectVo.dateType].title
				}}
				<view class="uniui-down1"></view>
				<span style="color: #777; font-weight: 500">
					(共{{ oneStoreList.total }}条)
				</span>
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view
				class="scroll-view_list"
				:refresher-triggered="triggered"
				refresher-background="transparent"
				@refresherpulling="refresherpulling"
				refresher-enabled="true"
				scroll-y="true"
				@scrolltolower="scrolltolower"
				@refresherrefresh="onRefresh"
			>
				<view v-if="oneStoreList.rows.length == 0" class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">暂无公告</view>
				</view>
				<view class="list_store">
					<view
						v-for="(item, index) in oneStoreList.rows"
						:key="index"
						class="item_sty"
						@click="storeDetail(item)"
					>
						<view class="content_title">
							<span class="red_top" v-if="item.topUp">置顶</span>
							{{ item.name }}
						</view>
						<image
							v-if="item.coverImage"
							lazy-load
							style="height: 300rpx; width: 100%"
							:src="item.coverImage"
							mode="aspectFill"
						></image>
						<view class="descr_tip">
							<span>{{ item.createEmp }}</span>
							<span>{{ item.updateTime }}</span>
						</view>
					</view>
					<view class="no_some" v-if="oneStoreList.rows.length > 0">
						{{ titleHint }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 时间筛选-->
		<uni-popup ref="popup" border-radius="10px 10px 0 0" type="bottom">
			<view class="popup">
				<view class="popup_top">
					<view class="popup_top_title">选择时间</view>
					<uni-icons
						size="28"
						color="#ccc"
						type="clear"
						@click="onClose"
					></uni-icons>
				</view>
				<view class="list_muen">
					<view
						v-for="(item, index) in filtList"
						:key="index"
						@click="onClickState(item.value)"
						class="list_muen_item"
					>
						<view
							class="list_muen_item_title"
							:class="dateType == item.value ? 'list_muen_item_isactive' : ''"
						>
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-datetime-picker
						v-model="range"
						:disabled="dateType != 4"
						rangeSeparator="至"
						type="daterange"
						@change="changeClick"
					/>
				</view>
				<view class="footer_btn">
					<view class="footer_btn_reset" @click="onReset">重置</view>
					<view class="footer_btn_confirmation" @click="onConfirmation">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {ref, reactive, nextTick, onMounted} from 'vue';
	import store from '@/store_network/index.js';
	import {onUnload, onLaunch, onLoad, onHide} from '@dcloudio/uni-app';
	import apiNotice from '@/util/network_api/notification.js';
	import _ from 'lodash';
	const triggered = ref(false);
	// 搜索
	const selectVo = ref({
		name: '', //搜索关键词：仓库名称
		limit: 0,
		page: 1,
		dateType: 0,
		startTime: '',
		endTime: '',
	});
	const popup = ref();
	const filtList = ref([
		{title: '全部', value: 0},
		{title: '本周', value: 1},
		{title: '本月', value: 2},
		{title: '本年', value: 3},
		{title: '自定义范围', value: 4},
	]);
	const range = ref();
	const end_start_Time = ref([]);
	const dateType = ref(1);
	const onClose = () => {
		popup.value.close();
	};
	// 重置
	const onReset = () => {
		dateType.value = 1;
		end_start_Time.value = [];
		range.value = '';
	};
	const onClickState = (value) => {
		dateType.value = value;
	};

	const changeClick = (val) => {
		end_start_Time.value = val;
	};
	const open = () => {
		dateType.value = selectVo.value.dateType;
		popup.value.open();
	};
	// 确认
	const onConfirmation = () => {
		if (dateType.value === 5 && end_start_Time.value.length == 0) {
			uni.showToast({
				title: '请选择时间范围',
				icon: 'none',
			});
			return;
		}
		selectVo.value.dateType = dateType.value;
		if (dateType.value === 4) {
			selectVo.value.startTime = end_start_Time.value[0];
			selectVo.value.endTime = end_start_Time.value[1];
		} else {
			selectVo.value.startTime = '';
			selectVo.value.endTime = '';
		}
		onRefresh();
		popup.value.close();
	};

	// 底部显示提示
	const titleHint = ref('没有更多了');
	const oneStoreList = ref({
		total: 0,
		rows: [],
	});
	const clear = () => {
		selectVo.value.name = '';
		search();
	};
	const search = _.debounce(
		async () => {
			selectVo.value.name = selectVo.value.name.trim();
			uni.showLoading({
				title: '加载中...',
			});
			getOneStoreList();
		},
		500,
		{leading: false},
	);
	const input = (n) => {
		if (!n) {
			search();
		}
	};
	// 获取列表
	const getOneStoreList = async () => {
		await apiNotice.getSysNoticeList(selectVo.value).then((res) => {
			uni.hideLoading();
			if (res.code == 20000) {
				if (
					oneStoreList.value.rows.length < oneStoreList.value.total &&
					selectVo.value.page > 1
				) {
					oneStoreList.value.rows = [
						...oneStoreList.value.rows,
						...res.data.rows,
					];
				} else {
					oneStoreList.value.rows = res.data.rows;
				}
				oneStoreList.value.total = res.data.total - 0;
			}
		});
		if (triggered.value) {
			setTimeout(() => {
				triggered.value = false;
			}, 400);
		}
	};
	onLoad(async () => {
		uni.showLoading({
			title: '加载中',
		});
		getOneStoreList();
		// 获取用户信息
		// await store.dispatch('getUpdataUser')
	});
	onUnload(() => {
		uni.hideLoading();
	});
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
		triggered.value = true;
	};
	const onRefresh = () => {
		selectVo.value.name = '';
		selectVo.value.page = 1;
		getOneStoreList();
	};
	// 底部触发
	const scrolltolower = () => {
		if (oneStoreList.value.rows.length < oneStoreList.value.total) {
			selectVo.value.page += 1;
			titleHint.value = '';
			getOneStoreList();
		} else {
			titleHint.value = '没有更多了';
		}
	};
	const storeDetail = (item) => {
		uni.navigateTo({
			url: '/pages_network/notification/notification_detail?id=' + item.id,
		});
	};
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		background-color: #fafafa;

		.search_box {
			display: flex;
			align-items: center;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.list_top {
			display: inline-block;
			padding: 12rpx 32rpx 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.filt_date {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				padding: 12rpx 0;

				.uniui-down1 {
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 12rpx solid #000;
					margin-left: 8rpx;
					margin-top: 4rpx;
				}
			}
		}

		.scroll_content {
			height: 100%;
			// flex: 1;
			overflow: hidden;

			.scroll-view_list {
				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;

				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.list_store {
					padding-bottom: 300rpx;
					display: flex;
					flex-direction: column;
					row-gap: 24rpx;
					margin: 0 24rpx;

					.no_some {
						font-size: 24rpx;
						color: #ccc;
						text-align: center;
						width: 100%;
						padding-bottom: 24rpx;
					}

					.item_sty {
						padding: 24rpx;
						border-radius: 4rpx;
						background-color: #fff;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						row-gap: 20rpx;

						.content_title {
							font-weight: bold;

							.red_top {
								color: #f56c6c;
								font-weight: normal;
								font-size: 26rpx;
							}
						}

						.descr_tip {
							color: #999;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
						}
					}
				}
			}
		}

		.popup {
			height: 600rpx;
			background-color: #fff;
			padding: 22rpx 24rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&_title {
					font-weight: bold;
					font-size: 28rpx;
				}
			}

			.list_muen {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					width: calc(100% / 3);
					display: flex;
					align-items: center;
					justify-content: center;

					&_title {
						background: rgba(238, 238, 238, 1);
						margin: 20rpx;
						width: 80%;
						padding: 14rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						border-radius: 10rpx;
					}

					&_isactive {
						background-color: #007cff;
						color: #fff;
					}
				}
			}

			.example-body {
				margin: 40rpx 20rpx;

				&_tip {
					color: rgba(245, 108, 108, 1);
					font-size: 24rpx;
					margin: 20rpx 0;
				}
			}

			.footer_btn {
				display: flex;
				align-items: center;
				padding: 50rpx 40rpx 40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;

				&_reset {
					height: 80rpx;
					color: #007cff;
					background: rgba(242, 249, 255, 1);
					width: 26%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_confirmation {
					height: 80rpx;
					color: #fff;
					background-color: #007cff;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 32rpx;
				}
			}
		}
	}
</style>
